---
slug: element-plus #路径，不能重复
title: element-plus # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---


### 表格宽度自适应

```html

<template>
<div>
    <el-table :data="moreColumnsData" border :header-cell-style="{ background: '#EFEFEF' }" >
      <el-table-column
            v-for="item in moreColumnsColumns"
            :label="item.remarks || item.fieldName"
            align="center"
            :prop="item.fieldName"
            :min-width="flexColumnWidth(item.remarks || item.fieldName,item.fieldName,moreColumnsData)">
      </el-table-column>
    </el-table>
</div>
</template>


<script>
const getTextWidth=(str)=>{
  let width = 0;
  const html = document.createElement("span");
  html.innerText = str;
  html.className = "getTextWidth";
  document.querySelector("body").appendChild(html);
  width = document.querySelector(".getTextWidth").offsetWidth * 1.2;
  document.querySelector(".getTextWidth").remove();
  return width;
}
// 动态计算列宽
const  flexColumnWidth=(label, prop, data)=>{
  // 将表头加入数组
  const arr = data.map((x) => x[prop]);
  arr.push(label);
  // 计算每列内容最大的宽度
  const maxWidth = arr.reduce((acc, item) => {
    if (item) {
      const width = getTextWidth(item);
      acc = Math.max(acc, width);
    }
    return acc;
  }, 0);
  // 返回最大宽度加上额外的内间距
  return maxWidth + 25 + "px";
}
</script>

```

### vue定义滚动条样式

```scss
::v-deep .el-scrollbar {

  .el-scrollbar__bar.is-horizontal {
    height: 14px; // 添加横向高度
  }
  .el-scrollbar__bar.is-vertical {
    width: 14px; // 添加纵向宽度
  }
  // 横向滚动条
  .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    opacity: 1; // 默认滚动条自带透明度
    height: 10px; // 横向滑块的宽度
    border-radius: 2px; // 圆角度数
    background-color: rgba(0, 0, 0, 0.2);// 滑块背景色
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
  }
  // 纵向滚动条
  .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
    opacity: 1;
    width: 10px; // 纵向滑块的宽度
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  }
}

```